<template>
	<view>
		<!-- <view class="">
			<image class="noOrderImg" :src="noOrderImg" mode="widthFix"></image>
		</view> -->
		<!-- 选项卡 -->
		<view class="tab" style="position: fixed;width: 100%; top: 0; left: 0;height: 100rpx; background-color: #FFFFFF;z-index: 999;
		box-shadow: 0 10rpx 10rpx 2rpx #F1F1F1; margin-bottom: 100rpx;">
			<view class="tab-item"  :class="currenIndex===index?'tab-item-active':''"
			    v-for="(item,index) in tabList" :key="index" @tap="tabItemClick(index)" >
				<text>{{item}}</text>
			</view>
		</view>
		<!-- 订单列表 -->
		<order-list :list="list"></order-list>
	</view> 
</template>

<script>
	import orderList from "../../componets/order/order-list.vue"
	export default {
		components:{
			orderList
		}, 
		data() {
			return {
				noOrderImg:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1606052524464.jpg",
				currenIndex:0,
				tabList:['全部','待付款','待发货','待收获','待评价'],
				orderListResult:[
					{	status:1,
						orderNo:"1354666255666",
						payMoney:90,
						sku:[
							{
								skuImage:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447990098.jpg",
								skuName:"皮尔卡丹牛仔裤男2020年秋冬季新款加绒直筒修身舒适透气弹力时尚休闲商务长裤子男 ",
								price:100,
								payNum:10,
								attr:"蓝色 XL 纯棉"
							},
							{
								skuImage:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447979813.jpg",
								skuName:"牛仔裤男2020秋冬季新款男士男裤休闲款修身直筒裤子男装",
								price:30,
								payNum:3,
								attr:"蓝色 XL 纯棉"
							}
						]
					},
					{
						status:2,
						orderNo:"1354666896966",
						payMoney:90,
						sku:[
							{
								skuImage:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447987108.jpg",
								skuName:"皮尔卡丹牛仔裤男2020年秋冬季",
								price:80,
								payNum:2,
								attr:"蓝色 XL 纯棉"
							}
						]
					},
					{
						status:3,
						orderNo:"1322338825566",
						payMoney:90,
						sku:[
							{
								skuImage:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447979813.jpg",
								skuName:"牛仔裤男2020秋冬季新款男士男裤休闲款修身直筒裤子男装",
								price:30,
								payNum:3,
								attr:"蓝色 XL 纯棉"
							},
							{
								skuImage:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447976565.jpg",
								skuName:"波司登旗下雪中飞棉衣男士冬季中长款外套韩版潮流装2020新款加厚棉袄潮牌羽绒",
								price:30,
								payNum:3,
								attr:"蓝色 XL 纯棉"
							}
						]
					},
					{
						status:4,
						orderNo:"1322338833366",
						payMoney:90,
						sku:[
							{
								skuImage:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447976565.jpg",
								skuName:"波司登旗下雪中飞棉衣男士冬季中长款外套韩版潮流装2020新款加厚棉袄潮牌羽绒",
								price:30,
								payNum:3,
								attr:"蓝色 XL 纯棉"
							},
							{
								skuImage:"https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605447987108.jpg",
								skuName:"皮尔卡丹牛仔裤男2020年秋冬季",
								price:80,
								payNum:2,
								attr:"蓝色 XL 纯棉"
							}
						]
					}
				],
				list:[]
			} 
		},
		computed:{
		
		},
		onLoad(option) {
			console.log(option)
			this.currenIndex=parseInt(option.type);
			if(this.currenIndex==0){
				this.list=this.orderListResult
			}else{
				this.list=this.orderListResult.filter(v=>v.status===this.currenIndex)
			}
		},
		methods: {
			tabItemClick(index){
				this.currenIndex=index;
				if(index==0){
					this.list=this.orderListResult
				}else{
					this.list=this.orderListResult.filter(v=>v.status==index)
				}
				
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #F1F1F1;
	}
.noOrderImg{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

.tab{
	background-color: #FFFFFF;
	display: flex;
	color: #666666;
	font-size: 30rpx;
	.tab-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx 0rpx;
	}
	.tab-item-active text{
		border-bottom: 5rpx solid #FF7C02;
		margin-bottom: -5rpx;//设置-5是因为border-bottom: 5rpx使得元素向上5rpx了
		color: #FF7C02;
	}
}

.order-list{
	margin-top: 20rpx;
	background-color: #FFFFFF;
	.order-top{
		padding: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 5rpx solid #F1F1F1;
		.status{
			font-weight: 700;			color:#FF7C02;
		} 
	}
	.order-sku{
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		border-bottom: 1rpx solid #F1F1F1;
		image{
			flex-shrink: 0;
			width: 150rpx;
			height: 150rpx;
			border-radius: 10rpx;
			
		}
		.atrr-name{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
		.price-payNum{
			flex-shrink: 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
		.attr, .payNum{
			color:#CCCCCC ;
		}
		
	}
}
// 超出2行设置省略号
.skuName{
	overflow:hidden; 
	text-overflow:ellipsis;
	display:-webkit-box; 
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2; 
}



// 按钮
.order-btn{
	display: flex;
	flex-direction: row-reverse;
	padding-bottom: 15rpx;
	.order-btn-item{
		border: 1rpx solid #FF7C02;
		margin-right: 20rpx;
		line-height: 1;
		padding: 15rpx 20rpx;
		border-radius: 10rpx;
		color: #FF7C02;
		margin-bottom: 20rpx;
	}
}
</style>
